﻿<phone:PhoneApplicationPage 
    x:Class="WPtrakt.ViewShow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:lazy="clr-namespace:LazyListBox"
    xmlns:custom="clr-namespace:WPtrakt.Custom"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False" BackKeyPress="PhoneApplicationPage_BackKeyPress" Loaded="PhoneApplicationPage_Loaded" OrientationChanged="PhoneApplicationPage_OrientationChanged">
    <Grid x:Name="LayoutRoot">
        <ProgressBar VerticalAlignment="Top" HorizontalAlignment="Left" Width="400" Visibility="Collapsed" Name="progressBarLoading" IsIndeterminate="True" />
        <controls:Panorama  Title="{Binding Name}" Name="ShowPanorama" SelectionChanged="MoviePanorama_SelectionChanged">
            <controls:PanoramaItem Header="Overview" Margin="0, -25">
                <Grid Margin="0 -30">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <ListBox Grid.Column="1" Margin="0,0,0,-3" Visibility="{Binding DetailVisibility}" SizeChanged="ListBox_SizeChanged">
                        <ListBoxItem Height="Auto">
                            <StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Year:" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}"  Foreground="Coral" />
                                    <TextBlock Text="{Binding Year}" FontSize="27" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Runtime:" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}"  Foreground="Coral" />
                                    <TextBlock Text="{Binding Runtime}" FontSize="27" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Certification:" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}"  Foreground="Coral" />
                                    <TextBlock Text="{Binding Certification}" FontSize="27" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Genre:" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}"  Foreground="Coral" />
                                    <TextBlock Text="{Binding GenreString}" FontSize="27" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap"   />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Rating:" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}"  Foreground="Coral" />
                                    <TextBlock Text="{Binding RatingString}" FontSize="27" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap"  />
                                </StackPanel>
                                <TextBlock Margin="10" Text="{Binding Overview}" FontSize="27" VerticalAlignment="Bottom" Style="{StaticResource PhoneTextLargeStyle}" Height="Auto" TextWrapping="Wrap" />
                            </StackPanel>
                        </ListBoxItem>
                        <ListBoxItem>
                            <StackPanel Grid.Column="1" Orientation="Horizontal" Height="150">
                                <TextBlock Text="IMDB" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}" TextDecorations="Underline" Name="ImdbButton" Tap="ImdbButton_Tap" />
                                <TextBlock Text="TVDB" FontSize="30" Style="{StaticResource PhoneTextLargeStyle}" TextDecorations="Underline" Name="TvdbButton" Tap="TvdbButton_Tap" />
                            </StackPanel>
                        </ListBoxItem>
                    </ListBox>
                </Grid>
            </controls:PanoramaItem>
            <controls:PanoramaItem Margin="0 -25" Header="Episodes" Orientation="Horizontal">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <lazy:LazyListBox Grid.Row="0" ItemsSource="{Binding EpisodeItems}" Margin="0,-25, 0, 30" Name="EpisodeList">
                        <lazy:LazyListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid HorizontalAlignment="Left"  Margin="0 3" Width="5" Grid.Column="0" Background="{StaticResource PhoneAccentBrush}" Opacity="0.5" />

                                    <StackPanel  Orientation="Horizontal"  Tap="StackPanel_Tap">
                                        <Grid  Margin="0 3" Width="{Binding NumberWidth}" VerticalAlignment="Top" Height="84">
                                            <TextBlock Grid.Row="0" FontSize="60" FontWeight="ExtraBold" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Episode}"  Style="{StaticResource PhoneTextLargeStyle}"/>
                                        </Grid>
                                        <StackPanel Orientation="Vertical" Margin="{Binding TextMarginForEpisode}">
                                            <TextBlock  Height="Auto" MaxWidth="{Binding MaxEpisodeWidth}"  Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontSize="20" TextWrapping="Wrap" />
                                            <TextBlock  Height="50"  Text="{Binding SubItemText}" Style="{StaticResource PhoneTextSubtleStyle}" />
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </lazy:LazyListBox.ItemTemplate>
                        <lazy:LazyListBox.LoadedItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.Triggers>
                                        <!--Show a nice animation to fade the minimal content into the full content-->
                                        <EventTrigger RoutedEvent="Grid.Loaded">
                                            <BeginStoryboard>
                                                <BeginStoryboard.Storyboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="LeftMarker" Storyboard.TargetProperty="Opacity" From="0.5" To="0" Duration="0:0:0.6">
                                                            <DoubleAnimation.EasingFunction>
                                                                <PowerEase EasingMode="EaseIn" Power="3"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>

                                                        <DoubleAnimation Storyboard.TargetName="WatchlistIcon" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6">
                                                            <DoubleAnimation.EasingFunction>
                                                                <PowerEase EasingMode="EaseIn" Power="3"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>

                                                        <DoubleAnimation Storyboard.TargetName="SeenIcon" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6">
                                                            <DoubleAnimation.EasingFunction>
                                                                <PowerEase EasingMode="EaseIn" Power="3"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>

                                                        <DoubleAnimation Storyboard.TargetName="RatingIcon" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6">
                                                            <DoubleAnimation.EasingFunction>
                                                                <PowerEase EasingMode="EaseIn" Power="3"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                    </Storyboard>
                                                </BeginStoryboard.Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Grid.Triggers>

                                    <Grid  Margin="0 3" Width="5" Name="LeftMarker" HorizontalAlignment="Left" Grid.Column="0" Background="{StaticResource PhoneAccentBrush}" Opacity="0.5" />
                                    <Grid  Margin="0 3" Width="{Binding NumberWidth}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="84">
                                        <TextBlock Grid.Row="0" FontSize="60" FontWeight="ExtraBold" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Episode}"  Style="{StaticResource PhoneTextLargeStyle}"/>
                                    </Grid>
                                    <StackPanel  Orientation="Horizontal" Tap="StackPanel_Tap">
                                        <Grid Width="{Binding NumberWidth}" Visibility="{Binding ScreenVisibility}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <custom:DelayLoadImage VerticalAlignment="Top" Margin="0 3"  Grid.Column="0" ActualImageSource="{Binding ScreenImage}"  HorizontalAlignment="Right"  Height="84" Visibility="{Binding ScreenVisibility}"/>
                                            <Image Margin="0 3" Opacity="0" Name="WatchlistIcon" Visibility="{Binding WatchlistVisibility}"  VerticalAlignment="Top" HorizontalAlignment="Left" Width="25" Height="40"  Grid.Column="0" Source="Images/watchlist.png"/>
                                            <Image Margin="0 3" Opacity="0" Name="SeenIcon" Visibility="{Binding SeenVisibility}"  VerticalAlignment="Top" HorizontalAlignment="Right" Width="50" Height="50"  Grid.Column="0" Source="Images/episode-watched.png"/>
                                            <Image Margin="0 3" Opacity="0" Name="RatingIcon" Visibility="{Binding RatingVisibility}"  VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"  Grid.Column="0" Source="{Binding RatingImage}"/>
                                        </Grid>

                                        <StackPanel Orientation="Vertical" Margin="{Binding TextMarginForEpisodeLoaded}">
                                            <TextBlock  Height="Auto" MaxWidth="{Binding MaxEpisodeWidth}"  Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontSize="20" TextWrapping="Wrap" />
                                            <TextBlock  Height="50"  Text="{Binding SubItemText}" Style="{StaticResource PhoneTextSubtleStyle}" />
                                        </StackPanel>

                                        <toolkit:ContextMenuService.ContextMenu>
                                            <toolkit:ContextMenu>
                                                <toolkit:MenuItem Header="Check In" Name="CheckinEpisode" Click="CheckinEpisode_Click" />
                                                <toolkit:MenuItem Header="Mark as seen" Visibility="{Binding ContextMarkAsWatchedVisibility}" Name="SeenEpisode" Click="SeenEpisode_Click" />
                                                <toolkit:MenuItem Header="Unmark as seen" Visibility="{Binding ContextUnMarkAsWatchedVisibility}" Name="UnSeenEpisode" Click="UnSeenEpisode_Click" />
                                                <toolkit:MenuItem Header="Add to watchlist" Visibility="{Binding ContextWatchlist}" Name="WatchlistEpisode" Click="WatchlistEpisode_Click" />
                                                <toolkit:MenuItem Header="Remove from watchlist" Visibility="{Binding ContextUnWatchlist}" Name="RemoveWatchlistEpisode" Click="RemoveWatchlistEpisode_Click" />
                                            </toolkit:ContextMenu>
                                        </toolkit:ContextMenuService.ContextMenu>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </lazy:LazyListBox.LoadedItemTemplate>
                    </lazy:LazyListBox>

                    <Grid Grid.Row="0"  Name="SeasonGrid" Visibility="Collapsed">
                        <ListBox ItemsSource="{Binding SeasonItems}" Name="SeasonsList" Width="400">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <toolkit:WrapPanel ItemWidth="200" ItemHeight="200"/>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Name="SeasonPanel" Background="{StaticResource PhoneAccentBrush}" Orientation="Horizontal" Margin="0,0,0,17"  Height="150" Width="150" Tap="SeasonPanel_Tap">
                                        <TextBlock TextAlignment="Center" HorizontalAlignment="Center" Width="150" VerticalAlignment="Center" Text="{Binding}" Foreground="{StaticResource PhoneContrastBackgroundBrush}" FontSize="100" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </Grid>
            </controls:PanoramaItem>
            <controls:PanoramaItem Margin="0 -25" Header="Unwatched" Orientation="Horizontal">
                <Grid>
                    <TextBlock  Name="NoUnWatchedEpisodes" Text="No unwatched episodes!" Visibility="Collapsed"  FontSize="30" HorizontalAlignment="Center"/>


                    <lazy:LazyListBox Grid.Row="1" ItemsSource="{Binding UnWatchedEpisodeItems}" x:Name="ListUpcomming"  Margin="0,-25, 0, 30">
                        <lazy:LazyListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                <Grid Background="{StaticResource PhoneAccentBrush}" Visibility="{Binding HeaderVisibility}">
                                    <TextBlock Foreground="White" Margin="20 5" FontSize="30"  Text="{Binding Header}"/>
                                </Grid>

                                <Grid>
                                    <Grid HorizontalAlignment="Left"  Margin="0 3" Width="5" Grid.Column="0" Background="{StaticResource PhoneAccentBrush}" Opacity="0.5" />

                                    <StackPanel  Orientation="Horizontal"  Tap="StackPanel_Tap">
                                        <Grid  Margin="0 3" Width="{Binding NumberWidth}" VerticalAlignment="Top" Height="84">
                                            <TextBlock Grid.Row="0" FontSize="60" FontWeight="ExtraBold" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Episode}"  Style="{StaticResource PhoneTextLargeStyle}"/>
                                        </Grid>
                                        <StackPanel Orientation="Vertical" Margin="{Binding TextMarginForEpisode}">
                                            <TextBlock  Height="Auto" MaxWidth="{Binding MaxEpisodeWidth}"  Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontSize="20" TextWrapping="Wrap" />
                                            <TextBlock  Height="50"  Text="{Binding SubItemText}" Style="{StaticResource PhoneTextSubtleStyle}" />
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </lazy:LazyListBox.ItemTemplate>
                        <lazy:LazyListBox.LoadedItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <Grid Background="{StaticResource PhoneAccentBrush}" Visibility="{Binding HeaderVisibility}">
                                        <TextBlock Foreground="White" Margin="20 5" FontSize="30"  Text="{Binding Header}"/>
                                    </Grid>

                                    <Grid>
                                        <Grid.Triggers>
                                            <!--Show a nice animation to fade the minimal content into the full content-->
                                            <EventTrigger RoutedEvent="Grid.Loaded">
                                                <BeginStoryboard>
                                                    <BeginStoryboard.Storyboard>
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="LeftMarker" Storyboard.TargetProperty="Opacity" From="0.5" To="0" Duration="0:0:0.6">
                                                                <DoubleAnimation.EasingFunction>
                                                                    <PowerEase EasingMode="EaseIn" Power="3"/>
                                                                </DoubleAnimation.EasingFunction>
                                                            </DoubleAnimation>

                                                            <DoubleAnimation Storyboard.TargetName="WatchlistIcon" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6">
                                                                <DoubleAnimation.EasingFunction>
                                                                    <PowerEase EasingMode="EaseIn" Power="3"/>
                                                                </DoubleAnimation.EasingFunction>
                                                            </DoubleAnimation>

                                                            <DoubleAnimation Storyboard.TargetName="SeenIcon" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6">
                                                                <DoubleAnimation.EasingFunction>
                                                                    <PowerEase EasingMode="EaseIn" Power="3"/>
                                                                </DoubleAnimation.EasingFunction>
                                                            </DoubleAnimation>

                                                            <DoubleAnimation Storyboard.TargetName="RatingIcon" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6">
                                                                <DoubleAnimation.EasingFunction>
                                                                    <PowerEase EasingMode="EaseIn" Power="3"/>
                                                                </DoubleAnimation.EasingFunction>
                                                            </DoubleAnimation>
                                                        </Storyboard>
                                                    </BeginStoryboard.Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Grid.Triggers>

                                        <Grid  Margin="0 3" Width="5" Name="LeftMarker" HorizontalAlignment="Left" Grid.Column="0" Background="{StaticResource PhoneAccentBrush}" Opacity="0.5" />
                                        <Grid  Margin="0 3" Width="{Binding NumberWidth}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="84">
                                            <TextBlock Grid.Row="0" FontSize="60" FontWeight="ExtraBold" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Episode}"  Style="{StaticResource PhoneTextLargeStyle}"/>
                                        </Grid>
                                        <StackPanel  Orientation="Horizontal" Tap="StackPanel_Tap">
                                            <Grid Width="{Binding NumberWidth}" Visibility="{Binding ScreenVisibility}">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <custom:DelayLoadImage VerticalAlignment="Top" Margin="0 3"  Grid.Column="0" ActualImageSource="{Binding ScreenImage}"  HorizontalAlignment="Right"  Height="84" Visibility="{Binding ScreenVisibility}"/>
                                                <Image Margin="0 3" Opacity="0" Name="WatchlistIcon" Visibility="{Binding WatchlistVisibility}"  VerticalAlignment="Top" HorizontalAlignment="Left" Width="25" Height="40"  Grid.Column="0" Source="Images/watchlist.png"/>
                                                <Image Margin="0 3" Opacity="0" Name="SeenIcon" Visibility="{Binding SeenVisibility}"  VerticalAlignment="Top" HorizontalAlignment="Right" Width="50" Height="50"  Grid.Column="0" Source="Images/episode-watched.png"/>
                                                <Image Margin="0 3" Opacity="0" Name="RatingIcon" Visibility="{Binding RatingVisibility}"  VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"  Grid.Column="0" Source="{Binding RatingImage}"/>
                                            </Grid>

                                            <StackPanel Orientation="Vertical" Margin="{Binding TextMarginForEpisodeLoaded}">
                                                <TextBlock  Height="Auto" MaxWidth="{Binding MaxEpisodeWidth}"  Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontSize="20" TextWrapping="Wrap" />
                                                <TextBlock  Height="50"  Text="{Binding SubItemText}" Style="{StaticResource PhoneTextSubtleStyle}" />
                                            </StackPanel>

                                            <toolkit:ContextMenuService.ContextMenu>
                                                <toolkit:ContextMenu>
                                                    <toolkit:MenuItem Header="Check In" Name="CheckinEpisode" Click="CheckinEpisode_Click" />
                                                    <toolkit:MenuItem Header="Mark as seen" Visibility="{Binding ContextMarkAsWatchedVisibility}" Name="SeenEpisode" Click="SeenEpisode_Click" />
                                                    <toolkit:MenuItem Header="Unmark as seen" Visibility="{Binding ContextUnMarkAsWatchedVisibility}" Name="UnSeenEpisode" Click="UnSeenEpisode_Click" />
                                                    <toolkit:MenuItem Header="Add to watchlist" Visibility="{Binding ContextWatchlist}" Name="WatchlistEpisode" Click="WatchlistEpisode_Click" />
                                                    <toolkit:MenuItem Header="Remove from watchlist" Visibility="{Binding ContextUnWatchlist}" Name="RemoveWatchlistEpisode" Click="RemoveWatchlistEpisode_Click" />
                                                </toolkit:ContextMenu>
                                            </toolkit:ContextMenuService.ContextMenu>
                                        </StackPanel>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </lazy:LazyListBox.LoadedItemTemplate>
                        
                    </lazy:LazyListBox>
                </Grid>

            </controls:PanoramaItem>
            <controls:PanoramaItem Header="Shouts" Margin="0, -25">
                <Grid>
                    <ListBox VerticalAlignment="Top" Margin="0,-30,15,0" ItemsSource="{Binding ShoutItems}" Name="ShoutList" Height="420" Width="405">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid  Margin="0,0,0,17" Height="Auto" VerticalAlignment="Stretch">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="60"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="1" Source="{Binding ImageSource}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="-60 12" Height="60"/>
                                    <StackPanel Grid.Column="2" Orientation="Vertical" Height="Auto">
                                        <TextBlock VerticalAlignment="Top" HorizontalAlignment="Left"  Height="50"  Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" />
                                        <TextBlock VerticalAlignment="Top"  HorizontalAlignment="Left" Height="Auto" TextWrapping="Wrap" Text="{Binding SubItemText}" Style="{StaticResource PhoneTextSubtleStyle}"  Name="ShoutText" MaxWidth="550" />
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <StackPanel VerticalAlignment="Bottom" Height="Auto" Margin="0,0,0,23" Name="ShoutSubmitText">
                        <TextBox  InputScope="Text" Name="ShoutText" VerticalAlignment="Bottom" />
                    </StackPanel>
                </Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar    IsVisible="False" IsMenuEnabled="True">
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>